<template>
	<view class="job-detail">
		<view class="detail-top oh" style="height: 500rpx;background-image: linear-gradient(#ffeaeb, #f8f8f8);">
			<view class="bac_f mr30 ml30 radius16" :style="{'marginTop':statusHeight}">
				<view class="job-h1 dis_flex pl30 pt30">
					<view class="dis_f">
						<text class="fw fz36">{{job_detail.name}}</text>
						<image class="h1-image w88 ml24" src="../../static/image/job.png" mode="widthFix"></image>
					</view>
					<view class="h1-salary fz30 fw mr30 tf_4537">
						{{job_detail.salary}}
					</view>
				</view>
				<view class="job-h2 dis_flex mt20 fz26 tf_666">
					<view class="pl30">
						<text>{{job_detail.district}}</text>
						<text class="ml10 mr10">|</text>
						<text v-if="job_detail.exp!=null" >{{job_detail.exp}}</text>
						<text v-else >0年经验</text>
					</view>
				</view>
				<view class="job-h3 mt20 pl30"><text class="fz26 tf_666">{{job_detail.introduce}}</text></view>
				<view
					class="dis_f mt34"
					style="
			      height: 66rpx;
			      background-image: linear-gradient(#fee1cd, #ffffff);
			    "
				>
					<image class="w26 ml30" src="../../static/image/fabu.png" mode="widthFix"></image>
					<text class="fz24 ml12 tf7">发布人：{{job_detail.information_provider}}</text>
				</view>
			</view>
			<u-navbar title="职位详情" :bgColor="bgColor" :autoBack="true"></u-navbar>
		</view>
		<view class="pl30 pr30 pt34 pb34 bac_f radius16 ml24 mr24 mt24">
			<view class="fz32 fw tf_22">职位说明</view>
			<u-gap height="1" bgColor="#E7E7E7" marginTop="15"></u-gap>
			<view class="mt32">
				<view class="">
					<view class="fz26 tf43">工作职责：</view>
					<view class="mt20 fz26 tf_666">
							<rich-text :nodes="job_detail.describe"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="pl30 pr30 pt34 pb34 bac_f radius16 ml24 mr24 mt24">
			<view class="dis_f">
				<image class="w24" src="../../static/image/dizhi-01.png" mode="widthFix"></image>
				<view class="fz26 tf_33 ml16">红马甲集团有限公司</view>
			</view>
			<view class="dis_f mt24">
				<image class="w24" src="../../static/image/dianhuajianpan.png" mode="widthFix"></image>
				<view class="fz26 tf_33 ml16">155 2500 6099</view>
			</view>
		</view>
		<view class="w h200">
			
		</view>
		<view class="dis_f p_f h136 w bac_f bs4 bs">
			<view class="w592 btn auto radius8 mt48 tf h88 dis_f jc fz32 mb40" @click="signUp">报名</view>
		</view>
		<!-- 弹出窗 -->
		<u-popup :show="openSubPopShow" mode="center" @close="openSubPopShow = false" :round="8">
			<view class="oh pl48 auto" style="width: 606rpx;height: 800rpx;">
				<view class="mt48 mr48">
					<view class="fz34 tf_22 fw">
						<view class="">职位信息</view>
						<view class="w143 h16 radius8" style="background-image: linear-gradient(#FD484B,#FE6F6F);margin-top: -12rpx; margin-left: -4rpx;"></view>
					</view>
					<view class="dis_f mt48 fz28 tf_666">
						<view class="">职位名称：</view>
						<view class="">管道疏通员</view>
					</view>
					<view class="dis_f fz28 tf_666 mt16">
						<view class="">薪资范围：</view>
						<view class="">2K~3K</view>
					</view>
				</view>
				<view class="mt82 mr48">
					<view class="fz34 tf_22 fw">
						<view class="">报名人信息</view>
						<view class="w175 h16 radius8" style="background-image: linear-gradient(#FD484B,#FE6F6F);margin-top: -12rpx; margin-left: -4rpx;"></view>
					</view>
					<view class="dis_f mt48 mr48">
						<view class="fz28 tf_666">姓&nbsp;&nbsp;&nbsp;名:</view>
						<view class="ml8"><u--input placeholder="请输入内容" border="bottom" placeholderClass="input-placeholder" clearable v-model="name" fontSize="26rpx"></u--input></view>
					</view>
					<view class="dis_f mt30 mr48">
						<view class="fz28 tf_666">年&nbsp;&nbsp;&nbsp;龄:</view>
						<view class="ml8"><u--input placeholder="请输入内容" border="bottom" placeholderClass="input-placeholder" clearable v-model="age" fontSize="26rpx"></u--input></view>
					</view>
					<view class="dis_f mt30">
						<view class="fz28 tf_666">手机号:</view>
						<view class="ml8"><u--input placeholder="请输入内容" border="bottom" placeholderClass="input-placeholder" clearable v-model="phone" fontSize="26rpx"></u--input></view>
					</view>
				</view>
			</view>
			<view class="h88 auto fz32 dis_f jc btn tf mb80 radius8" style="width: 392rpx;" @click="submitInfo">
				确认信息并提交
			</view>
		</u-popup>
	</view>
</template>

<script>
import { signUp, jobDetail } from '@/config/api.js';
export default {
	data() {
		return {
			statusHeight: '',
			job_detail:null,
			job_id: '', //工作id
			name: '',
			age: '',
			phone: '',
			openSubPopShow: false,
			bgColor: 'rgba(255,255,255,0)'
		};
	},
	onLoad(option) {
		let res = wx.getSystemInfoSync();
		this.statusHeight = res.statusBarHeight + 50 + 'px';
		this.job_id = option.id;
		this.jobDetail();
	},
	methods: {
		//工作详情
		jobDetail() {
			jobDetail({ id: this.job_id }).then(res => {
				console.log(res);
				this.job_detail= res
			});
		},
		signUp() {
			this.openSubPopShow = true;
		},
		
		submitInfo() {
			if(this.name.length==0 || this.age.length==0 || this.phone.length==0){
				uni.showModal({
					title:'提示',
					content:"请输入完整信息",
				})
			}else{
				signUp({ job_id: this.job_id, name: this.name, age: this.age, phone: this.phone }).then(res => {
					uni.showModal({
						title: '提示',
						content: '报名成功'
					});
					this.openSubPopShow = false;
				});
			}
		}
	}
};
</script>

<style lang="scss">
.input-placeholder {
	font-size: 26rpx;
	color: #d1d2d5;
}
</style>
